<template>
	<view class="viewWallet">
		<navBar isBack backColor="#fff" title="明细" color="#fff" background="transparent"></navBar>
		<view class="dm_topImg">
			<image :src="`${baseImg}/static/distri/makerCenter/bg.png`" mode=""></image>
			<!-- 累计佣金 -->
			<view class="dm_nowRatio">
				{{earnMoney}}
				<view class="dm_nowRatioItem">
					<image :src="`${baseImg}/static/distri/fenxiao/withdMoney.png`" mode=""></image>
					质保金（元）
				</view>
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<!-- <view class="selectTime" @click="pickTime">
				{{year}}年{{month}}月
				<image :src="`${baseImg}/static/distri/distriMoney/pullBottom.png`" mode=""></image>
			</view> -->
			<view class="list">
				<view class="item" v-for="(item,index) in viewList" :key="index">
					<view class="left">
						订单编号:
						<view class="">
							{{item.order_no}}
						</view>
						<!-- <span>{{$utils.getFormatDate(item.create_time*1000,'MM-dd hh:mm')}}</span> -->
					</view>
					<view class="right">
						+{{item.amount}}元
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		<u-picker mode="time" @confirm="pickTimeOk" v-model="showTime" :params="params"></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				baseImg:this.$static,
				navHeight:200,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				earnMoney:0,
				viewList:[],
				showTime:false,
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1<10?'0'+(new Date().getMonth()+1):new Date().getMonth()+1,
				page:1,
				pagesize:10,
				level:''
			}
		},
		onLoad(options) {
			this.earnMoney = options.earnMoney
			this.level = options.level
			console.log(options,'质保金---')
			
			this.navHeight = 460- Number(this.$store.state.system.navBarHeight)*2
			this.getViewAll()
		},
		onReachBottom() {
			this.page++
			let params = {
				// status:3,
				// year_month:this.year+'-'+this.month,
				// level:this.level,
				page:this.page,
				pagesize:this.pagesize
			}
			this.$api.getEarnList(params).then(res=>{
				console.log(res,'质保金')
				if(res.code==1){
					if(!res.data[0].list.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					// this.okPrice = res.data.list.income_sum?res.data.list.income_sum:0.00;
					this.viewList = this.viewList.concat(res.data[0].list)
				}
			})
		},
		methods:{
			// 获取已质保金列表
			getViewAll(){
				this.page = 1 
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					// status:3,
					// year_month:this.year+'-'+this.month,
					// level:this.level,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.getEarnList(params).then(res=>{
					console.log(res,'质保金')
					if(res.code==1){
						if(res.data[0].list.length<10){
							this.statusLoading = 'nomore'
						}
						// this.okPrice = res.data.list.income_sum?res.data.list.income_sum:0.00;
						this.viewList = res.data[0].list?res.data[0].list:[]
					}
				})
				uni.hideLoading()
			},
			// 时间选择
			pickTime(){
				this.showTime = true
			},
			// 弹框确定
			pickTimeOk(e){
				console.log(e,'时间选择确定')
				this.year = e.year
				this.month = e.month
				this.getViewAll()
			}
		}
	}
</script>

<style lang="scss">
	.viewWallet{
		.dm_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 累计佣金
		.dm_nowRatio{
			width: 100%;
			position: absolute;
			z-index: 2;
			left: 0;
			padding-left: 28rpx;
			bottom: 60rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.dm_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		// 时间选择
		.content{
			margin-bottom: 20rpx;
			.selectTime{
				padding: 28rpx;
				display: flex;
				align-items: center;
				width: 100%;
				background-color: #fff;
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				image{
					margin-left: 12rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.list{
				width: 702rpx;
				margin: 40rpx auto;
				padding: 12rpx 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #F4F4F4;
					.left{
						font: 400 28rpx/48rpx PingFang SC;
						color: #333;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						span{
							margin-top: 12rpx;
							font: 400 22rpx/36rpx PingFang SC;
							color: #A0A0A0;
						}
					}
					.right{
						width: 200rpx;
						height: 88rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						text-align: center;
						font: 500 22rpx/88rpx PingFang SC;
						color: #FA4E37;
					}
				}
			}
		}
	}
</style>